<script>
import KtTable from "/src/components/node-kantboot/components/KtTable/KtTable.vue";
import columns from "./config/columns.config.js"
import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";

export default {
  components: {KtIcon, KtTable},
  data() {
    return {
      columns,
      requestParam: {
        title: '111'
      },
      isInfoCardShow: false,
      isInfoCardEdit: false,
      isInfoCardAdd: false,
      bodyData: [],
      expandList: [],
      loading: false,
    }
  },
  mounted() {
    this.getBodyData();
  },
  methods: {
    getBodyData() {
      this.loading = true;
      this.$kt.requestSecurity.send({
        uri: "/user-admin-web/admin/router/getList",
        stateSuccess: (res) => {
          this.bodyData = res.data;
          this.loading = false;
        },
        stateFail: (res) => {
          this.$message.error(res.errMsg);
          this.loading = false;
        }
      });
    },
    selectExpand(item) {
      // 查询是否在expandList中
      if (this.expandList.includes(item.id)) {
        // 如果在，删除
        this.expandList = this.expandList.filter((id) => id !== item.id);
        return;
      }
      // 如果不在，添加
      this.expandList.push(item.id);
    },
    isExpand(item) {
      return this.expandList.includes(item.id);
    },
    openInfoCard(item) {
      if(!item){
        this.requestParam = {};
        this.isInfoCardShow = true;
        this.isInfoCardAdd = true;
        this.isInfoCardEdit = true;
        return;
      }
      this.requestParam = JSON.parse(JSON.stringify(item));
      this.isInfoCardShow = true;
      this.isInfoCardEdit = false;
      this.isInfoCardAdd = false;
    },
    toSave() {
      this.$kt.requestSecurity.send({
        uri: "/user-admin-web/admin/router/save",
        method: "POST",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success(res.msg);
          this.$kt.event.emit("routerChange");
          this.getBodyData();
          this.isInfoCardEdit = false;
        }
      });
    },
    toRemove(){
      // 是否确认删除
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$kt.requestSecurity.send({
          uri: "/user-admin-web/admin/router/remove",
          method: "POST",
          data: this.requestParam,
          stateSuccess: (res) => {
            this.$message.success(res.msg);
            this.getBodyData();
            this.$kt.event.emit("routerChange");
            this.isInfoCardShow = false;
          }
        });
      }).catch(() => {
        // 取消删除
      });
    },
    chooseIcon() {
      let loading = this.$loading({
        lock: true,
        text: '上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$kt.file.chooseImageOne().then(res => {
        // this.requestParam.fileIdOfIcon = res.data.id;
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "adminRouter",
          stateSuccess: (res) => {
            this.requestParam.fileIdOfIcon = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    }
  }
}
</script>

<template>
  <div class="box">

    <el-card
        v-loading="loading"
        class="card">
      <template #header>
        <div>路由管理</div>
      </template>
      <el-scrollbar class="scrollbar">
        <div
            class="router-box"
            v-for="item in bodyData"
            :class="{'router-box-border': isExpand(item)}">
          <div
              @click="openInfoCard(item)"
              :key="item.id" class="router-item">
            <span>
              <img
                  v-if="item.fileIdOfIcon"
                  :src="$kt.file.visit(item.fileIdOfIcon)" class="router-item-icon"/>
                <img
                    v-else
                    src="/logo.png"
                    class="router-item-icon" />
            </span>
            <span style="vertical-align: top">{{ item.title }}</span>
          </div>
          <div
              v-if="item.children&&item.children.length>0"
              class="router-down">
            <el-button
                v-if="!isExpand(item)"
                class="router-down-btn"
                @click="selectExpand(item)"
                size="small">
              <kt-icon icon="el-icon-arrow-down"></kt-icon>
            </el-button>

            <el-button
                v-else
                @click="selectExpand(item)"
                class="router-down-btn"
                size="small">
              <kt-icon icon="el-icon-arrow-up"></kt-icon>
            </el-button>
          </div>
          <div
              v-if="isExpand(item)"
              v-for="child in item.children"
              @click="openInfoCard(child)"
              class="router-item"
              style="font-size: 12px"
          >
              <span>
              <img
                  v-if="child.fileIdOfIcon"
                  :src="$kt.file.visit(child.fileIdOfIcon)" class="router-item-icon"/>
                <img
                    v-else
                    src="/logo.png"
                    class="router-item-icon" />
            </span>

            <span style="vertical-align: top">{{ child.title }}</span>
          </div>

        </div>
      </el-scrollbar>
      <template #footer>
        <div>
          <el-button
              @click="openInfoCard(false)"
              style="width: 100%"
          >新增</el-button>
        </div>
      </template>
    </el-card>
    <el-card
        v-if="isInfoCardShow"
        class="card">
      <template #header>
        <div v-if="isInfoCardAdd">新增路由</div>
        <div v-else>路由信息</div>
      </template>
      <el-scrollbar class="scrollbar">
        <el-form
            label-position="top"
            label-width="100px">

          <el-form-item
              v-if="!requestParam.children||requestParam.children.length===0"
              label="父级路由">
            <el-select
                :disabled="!isInfoCardEdit"
                v-model="requestParam.parentId"
                placeholder="无">
              <el-option
                  label="无"
                  value=""></el-option>
              <template
                  v-for="item in bodyData">
              <el-option
                  v-if="item.id!==requestParam.id"
                  :label="item.title"
                  :value="item.id">
              </el-option>
              </template>
            </el-select>
          </el-form-item>

          <el-form-item label="路由编码">
            <el-input
                :disabled="!isInfoCardEdit"
                v-model="requestParam.code"></el-input>
          </el-form-item>
          <el-form-item label="路由标题">
            <el-input
                :disabled="!isInfoCardEdit"
                v-model="requestParam.title"></el-input>
          </el-form-item>
          <el-form-item label="路由地址">
            <el-input
                :disabled="!isInfoCardEdit"
                v-model="requestParam.path"></el-input>
          </el-form-item>
          <el-form-item label="优先级">
            <el-input
                :disabled="!isInfoCardEdit"
                v-model="requestParam.priority"></el-input>
          </el-form-item>
          <el-form-item label="路由图标">
            <div class="img-box">
              <el-image
                  fit="object-fit"
                  class="img-icon"
                  :preview-teleported="true"
                  :preview-src-list="[$kt.file.visit(requestParam.fileIdOfIcon)]"
                  :src="$kt.file.visit(requestParam.fileIdOfIcon)">
              </el-image>
              <div
                  v-if="isInfoCardEdit"
                  @click="chooseIcon"
              class="img-view"
              >保存/修改</div>
            </div>

          </el-form-item>

        </el-form>
      </el-scrollbar>
      <template #footer>
        <div
            v-if="!isInfoCardAdd"
            style="text-align: right">
          <el-button
              v-if="!isInfoCardEdit"
              @click="isInfoCardEdit = true"
              type="primary">
            <kt-icon color="#fff" icon="el-icon-edit"></kt-icon>
          </el-button>
          <el-button
              v-if="!isInfoCardEdit"
              @click="toRemove()"
              type="danger">
            <kt-icon color="#fff" icon="el-icon-delete"></kt-icon>
          </el-button>
          <el-button
              v-if="isInfoCardEdit"
              @click="toSave()"
              type="primary">保存</el-button>
          <el-button
              v-if="isInfoCardEdit"
              @click="isInfoCardEdit = false">取消</el-button>
        </div>
        <div
            v-else
            style="text-align: right">
          <el-button
              @click="toSave()"
              type="primary">保存</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.box {
  padding: 10px;
  width: 700px;
  margin: 0 auto;
  text-align: center;

  .card {
    display: inline-block;
    height: calc(100vh - 30px);
    box-shadow: none;
    width: 300px;
    margin: 10px;
  }
}

.scrollbar {
  height: calc(100vh - 200px);
}

.router-box {
  position: relative;
  text-align: left;
}

.router-item {
  position: relative;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
  color: #606266;
  cursor: pointer;
  // 不可选中
  user-select: none;
  font-size: 14px;
  margin-bottom: 10px;
}


.router-down {
  position: absolute;
  right: 10px;
  top: 5px;
  border-radius: 20px;
}

.router-down-btn {
  border-radius: 20px;
}

.router-item:hover {
  background-color: #f5f7fa;
  border-radius: 10px;
}

.router-item:active {
  opacity: .5;
}

.router-box-border {
  border: 1px solid #ebeef5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.img-icon{
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.img-box{
  position: relative;
}

.img-view{
  position: absolute;
  width: 100%;
  height: 26px;
  font-size: 10px;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  line-height: 26px;
  color: #fff;
  letter-spacing: 2px;
  cursor: pointer;
}

.img-view:hover{
  font-size: 9px;
}

.img-view:active{
  font-size: 8px;
  background-color: rgba(0, 0, 0, 0.8);
}

.router-item-icon{
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 3px;
}

</style>